<template>
    <h1>用户注册</h1>
<table>
    <tr>
        <td>用户名称</td>
        <td>
            <input type="text" placeholder="请输入用户名" v-model="info.Mname"/>
        </td>
    </tr>
    <tr>
        <td>用户密码</td>
        <td>
            <input type="password" placeholder="请输入密码" v-model="info.Mpwd"/>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: center;">
            <input type="button" value="注册" @click="SaveData"/>
        </td>
    </tr>
</table>
</template>


<script setup lang="ts">
import axios from 'axios'      //完整的axios
import {ref} from 'vue'   //引入ref响应式函数是属于vue的一部分
//声明响应式数据
const info=ref({
    Mname:'',
    Mpwd:''
})
//声明注册信息方法
const SaveData=()=>{
    if(!info.value.Mname){
        alert("用户名不能为空");
        return;
    }
    if(!info.value.Mpwd){
        alert("密码不能为空");
        return;
    }
    if(info.value.Mpwd.length<6){
        alert("密码长度不得少于6位");
        return;
    }
    var reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
    if(!reg.test(info.value.Mpwd)){
        alert("密码必须包含数字和字母且长度在6-10位之间");
        return;
    }
    let obj={
        mname:info.value.Mname,
        mpwd:info.value.Mpwd
    }
    console.log(obj);
    axios.post("https://localhost:7193/api/Meber/MeberLoginAdd",
    {
        mname:info.value.Mname,
        mpwd:info.value.Mpwd
    })
    .then(res=>{
        console.log(res);
        if(res.data==-1){
            alert("用户已存在,请重新输入用户名");
        }
        else if(res.data>0){
            alert("注册成功");
        }
        else{
            alert("注册失败");
        }
    })
    .catch(error=>{
        console.log(error);
    })
}


</script>